<!--
* @Author: 杨小龙/Yangxiaolong
* @Description: component_name ；
* @Date: 2021-00-00 00:00:00
-->
<template>
  <div class="left-top-container">
    <Title>地区销量趋势</Title>
    <v-chart :option="charts_option"></v-chart>
  </div>
</template>
<script setup lang="ts">
import type { EChartsCoreOption } from "@/components/index.ts";
import { Title } from "@/components/index";
import echarts from "@/components/chart";
import { onMounted, ref } from "vue";
import { getAreaSalesList } from "@/api/modules/sales";
import type { IAreasales } from "@/api/types";
import { RequestEnum } from "@/common/canstant";

const area_sales_state = ref<IAreasales[]>([]);

const charts_option = ref<EChartsCoreOption>({});

const getAreaSalesState = async () => {
  const res = await getAreaSalesList();
  if (res.code === RequestEnum.SUCCESS) {
    area_sales_state.value = res.data || [];
    setChartsOption();
  }
};

const getSeries = () => {
  const colorSemiTransparentArr = [
    "rgba(11, 168, 255, 0.5)",
    "rgba(255, 168, 11, 0.5)",
    "rgba(255, 11, 168, 0.5)",
    "rgba(168, 255, 11, 0.5)",
    "rgba(11, 255, 168, 0.5)",
    "rgba(168, 11, 255, 0.5)",
  ];

  const colorFullArr = [
    "rgba(11, 168, 255, 1)",
    "rgba(255, 168, 11, 1)",
    "rgba(255, 11, 168, 1)",
    "rgba(168, 255, 11, 1)",
    "rgba(11, 255, 168, 1)",
    "rgba(168, 11, 255, 1)",
  ];

  return area_sales_state.value.map((item, i) => ({
    name: item.name,
    data: item.value,
    emphasis: {
      focus: "series",
    },
    stack: "Total",
    type: "line",
    linestyle: {
      borderwidth: 4,
    },
    symbol: "circle",
    showSymbol: false,
    smooth: true,
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: colorSemiTransparentArr[i],
        },
        {
          offset: 1,
          color: colorFullArr[i],
        },
      ]),
    },
  }));
};

const setChartsOption = () => {
  charts_option.value = {
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
    grid: {
      top: "20%",
      left: "4%",
      right: "3%",
      bottom: "10%",
      outerBoundsMode: "same",
      outerBoundsContain: "axisLabel",
      // containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        z: 1000,
        type: "cross",
        axis: "x",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      left: 20,
      top: "8%",
      icon: "circle",
      data: area_sales_state.value.map((item) => item.name),
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: {
      boundaryGap: false,
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "value",
      scale: true,
      minInterval: 1,
      axisLabel: {
        color: "#fff",
      },
    },
    series: getSeries(),
  };
};

onMounted(() => {
  getAreaSalesState();
});
</script>
<style lang="scss" scoped>
.left-top-container {
  padding: 8px;
  width: 100%;
  height: 420px;
  background-color: #2b2a2a;
}
</style>
